import React from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'

import { ListItem, LoadMore } from '../style'
import { getMoreArticle } from '../actionCreators'

class List extends React.PureComponent {
  render() {
    const { list, getMoreList, page } = this.props
    console.log('List render')
    return (
      <div>
        <ul>
          {list.map((item,index) => (
            <Link to={'/detail/' + item.get('id')} key={index}>
              <ListItem>
                <div className='pic' href="">
                  <img src={item.get('imgUrl')} alt="" />
                </div>
                <div className='content'>
                  <div className='title' href="https://www.baidu.com">{item.get('title')}</div>
                  <p className='abstract'>{item.get('abstract')}</p>
                </div>
              </ListItem>
            </Link>
          ))}
        </ul>
        <LoadMore onClick={()=> {getMoreList(page)}}>阅读更多</LoadMore>
      </div>
    )
  }
}

const mapDispatch = dispatch => ({
  getMoreList(page){
    dispatch(getMoreArticle(page))
  }
})

const mapState = (state) => {
  return {
    list: state.getIn(['home', 'articleList']),
    page: state.getIn(['home','articlePage'])
  }
}

export default connect(
  mapState,
  mapDispatch
)(List)
